<template>
  <div>
    <el-form inline label-width="82px">
      <el-form-item label="姓名：">
        <el-input
          v-model="usernameInput"
          placeholder="请输入姓名"
          style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="电话：">
        <el-input
          v-model="phoneInput"
          placeholder="请输入电话"
          style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="注册时间：">
        <el-input
          v-model="startTimeInput"
          placeholder="请选择开始日期"
          style="width: 200px"
        ><i
          slot="suffix"
          class="el-input__icon el-icon-date"
        /></el-input>
        至
        <el-input
          v-model="endTimeInput"
          placeholder="请选择结束日期"
          style="width: 200px"
        ><i
          slot="suffix"
          class="el-input__icon el-icon-date"
        /></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="success"
          plain
          @click="getTableData"
        >搜索</el-button>
        <el-button type="info" plain @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :data="UserInfoData" stripe style="width: 100%">
        <el-table-column prop="username" label="姓名" width="100" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="shopLogo" label="店铺log" width="100">
          <template slot-scope="scope">
            <el-image :src="scope.row.shopLogo">
              <div slot="error" class="image-slot">
                <p>暂无图片</p>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="店铺名称" width="180" />
        <el-table-column prop="shopAddress" label="店铺地址" width="250" />
        <el-table-column prop="isDel" label="是否启用" width="80">
          <template slot-scope="scope">
            <p v-if="scope.row.isDel === 0">是</p>
            <p v-if="scope.row.isDel === 1">否</p>
            <p v-else />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="200" />
        <el-table-column label="操作" width="250" :fixed="isMobile?false:'right'">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="handleView(scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div id="page" class="block">
        <el-pagination
          align="center"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getWbeRoot, getFileRoot } from '../../api/web-site'
import sessionStorage from '../../assets/js/storage'

export default {
  data () {
    return {
      UserInfoData: [
        {
          username: '',
          sex: '',
          email: '',
          phone: '',
          shopLogo: '',
          shopName: '',
          shopAddress: '',
          QRUrl: '',
          createTime: '',
          isDel: ''
        }
      ],

      /* 分页参数 */
      pageSize: 10,
      currentPage: 1,
      total: 0,

      /* 模糊搜索参数 */
      usernameInput: '',
      phoneInput: '',
      startTimeInput: '',
      endTimeInput: ''
    }
  },
  computed: {
    isMobile () {
      const u = navigator.userAgent
      return !!u.match(/AppleWebKit.*Mobile.*/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/)
    }
  },
  created () {
    this.getTableData()
  },

  methods: {
    /**
     * 表格数据请求
     */
    getTableData () {
      axios
        .get(getWbeRoot() + '/api/sysUser/getUserList', {
          params: {
            userName: this.usernameInput,
            phone: this.phoneInput,
            startTime: this.startTimeInput,
            endTime: this.endTimeInput,
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
        })
        .then((response) => {
          if (response.data.code === '200') {
            const data = response.data.data
            for (let i = 0; i < data.length; i++) {
              data[i].shopLogo = getFileRoot() + data[i].shopLogo
            }
            this.UserInfoData = response.data.data
            this.total = response.data.total
          }
        })
    },

    /**
     * 每页显示数据条数
     * @param val
     */
    handleSizeChange (val) {
      this.pageSize = val
      this.getTableData()
    },

    /**
     * 跳转页数
     * @param val
     */
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTableData()
    },

    /**
     * 查看详情
     * @param val
     */
    handleView (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('type', 'view')
      this.$router.push('business-details')
    },

    /**
     * 编辑
     * @param val
     */
    handleEdit (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('type', 'edit')
      this.$router.push('business-details')
    },

    /**
     * 删除
     * @param val
     */
    handleDelete (val) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
          .get(getWbeRoot() + '/api/sysUser/deleteSysUser', {
            params: {
              userId: val.id
            }
          })
          .then((response) => {
            if (response.data.code === '200') {
              this.$message({
                showClose: true,
                message: response.data.msg,
                type: 'success'
              })
            } else {
              this.$message.error(response.data.msg)
            }
          })
      })
    },

    /**
     * 重置
     */
    handleReset () {
      this.usernameInput = ''
      this.phoneInput = ''
      this.startTimeInput = ''
      this.endTimeInput = ''
      this.getTableData()
    }
  }
}
</script>

<style scoped>
#page {
  margin-top: 20px;
}
</style>
